<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- <img src="https://gitee.com/Zcb991/upload_images/raw/master/20210825/do"> -->
    <img src="./images/数据代理.jpg" style="width: 1300px;">
    <script>
        // 数据代理：通过一个对象对另一个对象中的属性进行操作
        let obj1 = {x: 100}
        let obj2 = {y: 200}

        Object.defineProperty(obj2, "x", {
            get() {
                return obj1.x;  // 给obj2增加了一个属性x，当访问x的时候，返回obj1的x值
            },
            set(value) {
                obj1.x = value;  // 当修改obj2的x属性时，同时修改obj1的x属性值
            }
        })
        console.log("obj2的x值",obj2.x);  // 100
        obj2.x = 500;
        console.log("obj2的x值",obj2.x);  // 500
        console.log("obj1的x值",obj1.x);  // 500

        /* 
            vue数据代理原理
                先将new Vue() 函数中的data 先解析为vm对象（vue实例）的_data中，
                然后再将_data中的数据解析到外面，这第二个过程用的就是Object.defineProperty()方法

        */
    </script>
</body>
</html>